<template>
	<div class="container" v-loading="loading" element-loading-text="加载中" element-loading-background="rgba(0, 0, 0, 0.8)">
		<div class="module-title">
			<img src="../../../assets/images/home08.png" alt="" />
			<span>返修单产品</span>
		</div>
		<div class="module-content">
			<div class="table-thead">
				<ul>
					<li v-for="column in theadText" :key="column.name" :style="{ width: column.width }" class="table-thead-column-item">{{ column.name }}</li>
				</ul>
			</div>
			<div class="table-body">
				<ul class="wrapper" v-if="!noData">
					<li class="row" v-for="(item, index) in tableData" :key="index" :style="{ color: item.type === '1' ? '#353535' : '#ff0000' }">
						<ul v-show="typeof item === 'object'">
							<li :style="{ width: theadText[0].width }">{{ item.index }}</li>
							<li :style="{ width: theadText[1].width }">{{ item.repairNumber }}</li>
							<li :style="{ width: theadText[2].width }">{{ item.productModel }}</li>
							<li :style="{ width: theadText[3].width }" :class="{ undertint: !item.productNumber }">{{ item.productNumber || "/" }}</li>
							<li :style="{ width: theadText[4].width }" v-if="item.processSchedule && item.processSchedule.length <= 10">{{ item.processSchedule }}</li>
							<li :style="{ width: theadText[4].width }" v-if="item.processSchedule && item.processSchedule.length > 10">
								<div class="scroll-container">
									<div class="scroll-text">{{ item.processSchedule }}</div>
								</div>
							</li>
							<li :style="{ width: theadText[4].width }" v-if="!item.processSchedule">{{ item.processSchedule }}</li>
							<li :style="{ width: theadText[5].width }" :class="{ undertint: !item.workshopSection }">{{ item.workshopSection || "/" }}</li>
							<li :style="[{ width: theadText[6].width }, { color: item.type === '1' ? '#019708' : '#ff0000' }]">{{ item.status }}</li>
						</ul>
						<ul v-show="typeof item == 'string'">
							<li class="split-header">{{ item }}</li>
						</ul>
					</li>
				</ul>
				<div class="no-data" v-if="noData">
					<div>暂无数据</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { repairOrderProductList } from "@/api/home.js"

export default {
	props: {
		openAnimation: {
			typeof: Boolean,
			default: false
		}
	},
	data() {
		return {
			noData: false,
			theadText: [
				{
					name: "序号",
					width: "6%"
				},
				{
					name: "返修单号",
					width: "16%"
				},
				{
					name: "返修产品",
					width: "18%"
				},
				{
					name: "产品编号",
					width: "16%"
				},
				{
					name: "工艺进度",
					width: "24%"
				},
				{
					name: "工段",
					width: "10%"
				},
				{
					name: "状态",
					width: "10%"
				}
			],
			tableData: [],
			loading: false
		}
	},
	created() {
		this.getList()
	},
	methods: {
    changeData(data){
      let tempArr = []
					for (let key in data) {
						tempArr.push(`${key}（${data[key].length}套）`)
						if (Array.isArray(data[key])) {
							for (let i = 0; i < data[key].length; i++) {
								data[key][i]["index"] = i + 1
								tempArr.push(data[key][i])
							}
						}
					}
					this.tableData = tempArr
          this.noData = false
    },
		async getList() {
			try {
				this.loading = true
				const localData = JSON.parse(localStorage.getItem("tableData"))
				if (localData) {
          this.changeData(localData)
					this.noData = this.tableData.length === 0
          this.loading = false
				}
				const res = await repairOrderProductList()
				if (res.data) {
          localStorage.setItem("tableData", JSON.stringify(res.data))
          this.changeData(res.data)
				} else {
					this.tableData = []
					this.noData = true
				}
				this.loading = false
			} catch (error) {
				this.loading = false
				console.error(error)
				this.$modal.msgError("获取返修单产品数据错误", error)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
}

.module-title {
	height: 3.125rem;
	line-height: 3.125rem;
	font-size: 1.125rem;
	color: #3f949d;
	letter-spacing: 1px;
	background: url("../../../assets/images/home06.png") no-repeat;
	background-size: 100% 110%;
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
}

.module-title img {
	margin: 0 1.625rem;
}

.module-content {
	height: calc(100% - 3.125rem);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Webkit */
	::-webkit-scrollbar {
		display: none;
	}
	-webkit-overflow-scrolling: touch;
	/* Firefox */
	scrollbar-width: none;
	/* IE and Edge */
	-ms-overflow-style: none;
	.table-thead {
		width: 100%;
		height: 2.5rem;
		overflow: hidden;
		box-sizing: border-box;
		ul {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			background-color: #e6f3f3;
		}
		ul > li {
			font-size: 1.125rem;
			color: #1c7f8a;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 2.5rem;
			letter-spacing: 1px;
		}
	}
	.table-body {
		width: 100%;
		height: calc(100% - 2.5rem);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		.wrapper {
			width: 100%;
			height: 100%;
			overflow-y: auto;
			.row {
				width: 100%;
				height: 2.5rem;
			}
		}
		.no-data {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			font-size: 1rem;
			letter-spacing: 2px;
			color: gray;
			text-align: center;
			user-select: none;
		}
	}
}

.row {
	ul {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	ul > li {
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 1rem;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		letter-spacing: 1px;
		flex-shrink: 0;
	}

	.split-header {
		width: 100%;
		color: #1c7f8a;
		font-size: 1.25rem;
		text-align: left;
		text-indent: 2em;
	}
	.undertint {
		color: rgb(102, 102, 102, 0.4);
	}
}

.row:nth-child(2n) {
	background-color: #ebf9f9;
}

.row ul:hover {
	color: #68d8ff;
	background: #eeeff7 !important;
}

.scroll-container {
	overflow: hidden;
	white-space: nowrap;
}

.scroll-text {
	display: inline-block;
	padding-left: 100%;
	animation: scroll-left 7s linear infinite;
}

@keyframes scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}
</style>
